<template>
	<view class="container">
		<div class="ibox" v-if="list.length">
			<div class="flexB">
				<div>
					<radio :checked="checkedAll" color="#3254c3" @click="allCb" />
					<span>全选</span>
					<span class="c80">(共件{{ total }}商品)</span>
				</div>
				<div class="c80 f14" @click="reset">清空购物车</div>
			</div>
			<goodsItem type="2" v-for="(i, idx) in list" :key="i" :info="i" @update="update" @checked="checkedCb(i, idx)" />

			<div>
				<div class="flexB">
					<div>总价</div>
					<div>¥{{ price }}</div>
				</div>
				<div class="flexB">
					<div></div>
					<div class="btn" @click="pay">去结算</div>
				</div>
			</div>
		</div>
		<div v-else class="kong">空空如也,快去选购吧！</div>

	</view>
</template>

<script>
import goodsItem from "@/components/goodsItem";

export default {
	components: { goodsItem },
	data() {
		return {
			checkedAll: false,
			page: 1,
			list: []
		}
	},
	onShow() {
		this.getList();
	},
	computed: {
		total() {
			let n = 0;
			this.list.map(i => n += i.num);
			return n;
		},
		price() {
			let n = 0;
			this.list.map(i => n += (i.sellingPrice * i.num));
			return n;
		}
	},
	methods: {
		reset() {
			uni.showModal({
				title: '提示',
				content: '确定清空购物车？',
				success: (res) => {
					if (res.confirm) {
						this.$request({
							url: '/carts/overCarts',
							method: 'get',
						}).then(res => {
							this.$msg('操作成功');
							this.list = [];
						})
					} else if (res.cancel) {
					}
				}
			});

		},
		pay() {
			let arr = this.list.filter(i=>i.checked == true);
			if(!arr.length) return this.$msg('请先勾选要结算的商品');

			uni.showModal({
				title: '提示',
				content: '请先订阅订单状态, 才能结算',
				success: (res) => {
					if (res.confirm) {
						// 用户确认后，再次通过按钮触发订阅
						uni.requestSubscribeMessage({
							tmplIds: ['_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'],
							success:(res)=> {
								if(res._emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4 == 'accept') {
									
									uni.setStorageSync('carArr', arr);
									uni.navigateTo({
										url: `/pages/order`
									});

								} else {
									this.$msg('取消订阅，无法结算');
								}
							}
						})
					}
				}
			});

			
		},
		allCb() {
			this.checkedAll = !this.checkedAll;
			this.list.map(i => {
				i.checked = this.checkedAll
			})
		},
		checkedCb(i, idx) {
			this.$set(this.list[idx], 'checked', !i.checked);			
			let b = !this.list.find(i=>i.checked==false);
			this.checkedAll = b;
		},
		update() {
			this.getList();
		},
		getList() {
			this.$request({
				url: '/carts/cartsList',
				method: 'get',
				loading: true,
			}).then(res => {
				this.list = res.data.map(i => ({ ...i, checked: true }));
				this.checkedAll = true;
			})
		}
	}
}
</script>

<style lang="scss">
.btn {
	margin-top: 20px;
	text-align: center;
	width: 88px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}
</style>